<template>
  <div>
    <el-button @click="formVisible=true">新增</el-button>

    <!-- 下拉列表 -->
    <cxs-select
        :options="tableList"
        valuekey="tableName"
        labelkey="name"
        default-index="0"
        @change="selectChange"
    >
    </cxs-select>

    <!-- 表格 -->
    <cxs-table
        :selectable=true
        :page="pageOption"
        :table-data="tableData"
        :table-attr="tableAttr"
        :show-edit="hasAuth('sys:table:update')"
        :show-delete="hasAuth('sys:table:delete')"
        @editClick="editClick"
        @deleteClick="row => confirm(() => delHandle(row.id))"
        @pagerChange="pagerChange"
    >
    </cxs-table>

    <!-- 新增/编辑对话框 -->
    <cxs-form
        title="列"
        :data="formData"
        :form-attr="formAttr"
        :show.sync="formVisible"
        :inline="true"
        @onSubmit="onSubmit"
    ></cxs-form>
  </div>
</template>

<script>
export default {
  name: "Index",
  data() {
    return {
      tableList:[],
      tableOption: {},
      options:{},
      formVisible: false,
      formData: {type: 'text', header: 'none'},
      // 表单属性
      formAttr: [],
      tableData:[],
      tableAttr:[
        {field: "id", label: "序号", width: 80},
        {field: "field", label: "列名"},
        {field: "label", label: "标题"},
        {field: "type", label: "类型"},
        {field: "width", label: "列宽"},
        {field: "header", label: "列头"},
        {type: "handle", label: "操作"}

      ],
      pageOption: {current: 1, size: 10, total: 0, sizes: [10, 20, 50, 100]},
      multipleSelection: []
    }
  },
  methods: {
    /**
     * 分页改变后的回调
     * @param option 分页属性
     */
    pagerChange(option) {
    },
    /**
     * 获取指定表格的所有列
     */
    getList(id) {
      this.$axios.post('/sys/table/list', {
        permissionId: id ? id : this.tableOption.id,
        pageOption: this.pageOption,
      }).then(res => {
        if (res && res.data && res.data.data) {
          let {current, size, total, records} = res.data.data
          this.tableData = records
          this.pageOption = {current, size, total}
        }
      })
    },
    getOption(tableName) {
      this.$axios.get('/sys/table/options/' + tableName)
        .then(res => {
          if (res.data.code == "00000" && res.data.data ) {
            this.formAttr = res.data.data.formAttr;
          }
        })
    },
    editClick(data) {
      this.formData = data;
      this.formVisible = true
    },
    onSubmit(data) {
      data.permissionId = this.tableOption.id;
      this.$axios.post('/sys/table/' + (data.id ? 'update' : 'save'), data)
      .then(res => {
        if (res.data.code == '00000') {
          this.getList();
          this.msgBox();
          this.formVisible = false;
        } else {
          this.msgBox(false);
        }
      })
    },
    selectChange(data) {
      this.tableOption = data
      this.getList();
      this.getOption(data.tableName)
    },
    /**
     * 删除
     * @param id
     */
    delHandle(id) {
      var ids = []
      id ? ids.push(id) : this.multipleSelection.forEach(row => ids.push(row.id))
      this.$axios.post("/sys/table/delete", ids).then(res => {
        this.getList()
        this.msgBox();
      })
    }
  },
  created() {
    // 获取表格列表
    this.$axios.post('/sys/menu/getMenu', {})
        .then(res => {
          if (res && res.data && res.data.data) {
            this.tableList = res.data.data
            // 默认第一项
            let { id, tableName } = this.tableList[0];
            // 获取列
            this.getList(id);
            // 获取对话框选项
            this.getOption(tableName);
          }
        })
  }
}
</script>

<style scoped>

</style>